<template>
  <div id="hu"></div>
</template>

<script>
export default {
  name: "humidity",
  data() {
    return { myChart: null };
  },
  computed: {
    dataPageData() {
      return this.$store.state.dataPageData;
    },
  },
  watch: {
    dataPageData: {
      immediate: true,
      deep: true,
      handler(res) {
        if (res) {
          // 看数据格式再填入参数
          this.getEchart(res.datas);
        }
      },
    },
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart(datas) {
      if (this.myChart) {
        this.myChart.dispose();
        this.myChart = null;
      }
      // 实例化对象
      this.myChart = echarts.init(document.getElementById("hu"));
      // 指定配置和数据
      let option = {
        tooltip: {
          formatter: "{b} : {c}%",
          position: ["5", "10"],
        },
        series: [
          {
            name: "当前坏境",
            type: "gauge",
            radius: "100%",
            // center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
            min: 0,
            max: 100,
            // 仪表盘详情，用于显示数据
            detail: {
              show: true, // 是否显示详情,默认 true。
              offsetCenter: [-2, "50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              color: "auto", // 文字的颜色,默认 auto。
              formatter: "{value}%",
              fontSize: 11,
            },
            data: datas || [{ value: 30, name: "湿度" }], // 
            // 仪表盘指针
            pointer: {
              show: true, // 是否显示指针,默认 true。
              length: "60%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
              width: 4, // 指针宽度,默认 8。
              itemStyle: {
                color: "auto",
              },
            },
            // 仪表盘轴线(轮廓线)
            axisLine: {
              lineStyle: {
                color: [
                  [0.5, "#4dabf7"],
                  [0.65, "#69db7c"],
                  [0.8, "#ffa94d"],
                  [1, "#ff6b6b"],
                ],
              },
            },
            // 刻度标签
            axisLabel: {
              show: true, // 是否显示标签,默认 true。
              distance: 15, // 标签与刻度线的距离,默认 5。
              color: "auto", // 文字的颜色,默认 #fff。
              fontSize: 8, // 文字的字体大小,默认 5。
            },
            // 分割线
            splitLine: {
              length: 9.5,
              distance: -9.5,
              lineStyle: {
                color: "#fff",
                width: 1.8,
              },
            },
            // 刻度线
            axisTick: {
              length: 4,
              distance: -9.5,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            // 仪表盘标题
            title: {
              show: true, // 是否显示标题,默认 true。
              offsetCenter: [0, "-20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              color: "#fff", // 文字的颜色,默认 #333。
              fontSize: 10, // 文字的字体大小,默认 15。
            },
          },
        ],
      };
      if (this.myChart) {
        this.myChart.clear();
        this.myChart.setOption(option, true);
      }
      // option && myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
  beforeDestroy() {},
};
</script>

<style  lang="scss" scoped>
div {
  width: 100%;
  height: 100%;
}
</style>